<template>
  <Header></Header>
  <div class="login">
    <!-- 登录整体logo -->
    <div :class="isShow === false ? 'phone-logo' : 'login-logo'">
      <img src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" alt="" />
    </div>
    <!-- 主体部分 -->
    <div class="login-main" v-if="isShow">
      <!-- size="large" -->
      <van-button type="danger" icon="phone" block @click="isShow = false">手机号快捷登录</van-button>
      <van-button icon="comment" block>邮箱账号登录</van-button>
    </div>

    <!-- 输入登录部分 -->
    <div class="login-input" v-if="!isShow">
      <!-- v-model="value" -->
      <van-cell-group inset class="mb-15">
        <!-- 输入手机号，调起手机号键盘 -->
        <van-field v-model="phone" type="tel" placeholder="请输入手机号" border />
        <van-field v-model="password" type="password" placeholder="请输入密码" border />
      </van-cell-group>

      <div class="input-fuzhu">
        <p>忘记密码?</p>
        <p>短信快捷登录</p>
      </div>

      <van-button type="danger" block class="login-button" @click="login">登录</van-button>
      <p class="other" @click="isShow = true">其他登陆方式 ></p>
    </div>

    <!-- 页脚部分 -->
    <div class="login-floor" v-if="isShow">
      <van-button icon="wechat" size="small">微信</van-button>
      <van-button icon="qq" size="small">QQ</van-button>
      <van-button icon="weibo" size="small">微博</van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入ref
import { ref } from 'vue'
// 导入api
import { loginData } from '@/api/login'
// 导入存储token到本地
import { saveToken } from '@/utils/storage'
// 导入路由
import { useRouter } from 'vue-router'
// 获取路由实例
const router = useRouter()
// 控制点击登录的切换样式
const isShow = ref(true)

const phone = ref('') // 用户手机号
const password = ref('') // 用户输入的密码

// 点击登录按钮回调
const login = async () => {
  try {
    // 传入用户输入的数据
    const result = await loginData({ phone: phone.value, password: password.value })
    // console.log(result) 测试
    // 存储token
    saveToken(result.token)
    // 并跳转到首页
    router.push('/home')
  } catch (error) {
    console.log(error)
  }
}
</script>

<style scoped>
.login {
  position: relative;
  height: 300px;
}
/* 图片logo */
.login .login-logo {
  position: relative;
  height: 100px;
  text-align: center;
  line-height: 130px;
  /* width: 130px; */
  margin: 40px auto 40px;
}

.login .phone-logo {
  position: relative;
  height: 22vh;
  text-align: center;
  line-height: 22vh;
  /* width: 130px; */
  /* margin: 40px auto 40px; */
}
.phone-logo img {
  width: 35%;
}
.login-logo img {
  width: 35%;
}

.login-main {
  padding: 0 20px;
}

:deep(.van-button--block):last-child {
  margin-top: 15px;
  color: red;
}

.login-floor {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 430px;
  left: 50%;
  transform: translate(-50%);
}

:deep(.van-button--small) {
  border: none;
  color: #666;
  font-size: 14px;
}

:deep(.van-button--small):first-child {
  margin-right: 15px;
}

:deep(.van-button--small):last-child {
  margin-left: 15px;
  border: none;
}

.other {
  text-align: center;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 5px;
}

/* 登录部分 */
.input-fuzhu {
  height: 30px;
  /* display: flex; */
  position: relative;
  font-size: 14px;
}

.input-fuzhu :first-child {
  position: absolute;
  left: 30px;
  color: #666;
}

.input-fuzhu :last-child {
  position: absolute;
  right: 30px;
}

/* :deep(.van-button--block) {
  margin-top: 15px;
  color: red;
} */

.login-button {
  width: 330px;
  margin: 8px auto;
  margin-bottom: 80px;
}

.mb-15 {
  margin-bottom: 15px;
}
</style>
